
<template>
  <div class="userLogin">
    <el-card class="titleCard">李同学文管</el-card>
    <el-card class="usrCard">
      <h1 class="usrTitle">登录</h1>
      <el-form :model="ruleForm" label-position="left" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="account">
          <el-input v-model="ruleForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <div style="text-align: center">
          <el-button @click="resetForm('ruleForm')" class="loginBut">重置</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" class="loginBut">登录</el-button>
        </div>
        <p style="float: right;font-size: 14px">
          暂无账号？<el-link type="primary" @click="toRegister">去注册</el-link>
        </p>
      </el-form>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
@media screen and (max-width: 750px) {
  .titleCard{
    width: 70% !important;
  }
  .usrCard{
    width: 70% !important;
  }
}
.userLogin{
  height: 100%;
  width: 100%;
  background-size: 100%;
  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background: url("../../assets/img/bg.jpg");
  .titleCard{
    font-size: 30px;
    text-align: center;
    width: 30%;
    margin-bottom: 20px;
    background-color: #409EFF;
    border: 0;
  }
  .usrTitle{
    display: flex;
    justify-content:center;
    margin-bottom: 40px;
  }
}
.usrCard{
  border: 0;
  background-color:white;
  width: 30%;
}
</style>
<script>
export default {
  data () {
    return {
      ruleForm: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    toRegister () {
      this.$router.push('/register')
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/login', this.ruleForm).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: '登陆成功',
                type: 'success'
              })
              sessionStorage.setItem('token', res.data.data)
              this.$router.push('/comMain')
              this.$axios.post('/getInfo').then((res) => {
                sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))
                this.$store.commit('user/userInfo',JSON.stringify(res.data.data))
              })
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
